<template>
  <div class="header">
    <div class="header-left">
    	<div class="iconfont backBtn">&#xe697;</div>
    </div>
    <div class="header-input">
    <span class="iconfont ">&#xe6ac;</span>	
    输入城市/景点/游玩主题
</div>
  <router-link to="/city">
    <div class="header-right">
      {{this.city}}
      <span class="iconfont">&#xe60e;</span>
    </div>
  </router-link>

</div>
</template>

<script>
import {mapState} from 'vuex' 
export default {
  name: 'HomeHead',
  computed:{
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>

 @import '~styles/varibles.styl'

   .header
     display:flex
     // height:.86rem
     line-height:$headerHeight
     background:$bgcolor
     color:#ffffff
     .header-left
     	width:.64rem
     	float:left
      .backBtn
      	font-size:$backBtn
      	text-align:center
     .header-input
     	flex:1
     	height:.64rem
     	margin-top:.12rem
     	margin-left:.2rem
     	background:#ffffff
     	border-radius:.2rem
     	line-height:.64rem
     	padding-left:.3rem
     	color:#ccc
     .header-right
     	min-width:1.04rem
      padding:0 0.1rem
     	float:right
     	text-align:center
      color:#ffffff
</style>
